<template>
  <div class="text-option-panel">
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane label="基础配置" name="basic">
        <div class="config-section">
          <el-form label-position="top">
            <el-form-item label="文本内容">
              <el-input
                type="textarea"
                :rows="3"
                v-model="localConfig.text"
                @change="val => updateField('text', val)"
                placeholder="请输入文本内容"
              />
            </el-form-item>
            
            <el-form-item label="文本绑定">
              <el-select
                v-model="localConfig.useBinding"
                @change="val => updateField('useBinding', val)"
                placeholder="选择数据绑定"
                clearable
              >
                <el-option
                  v-for="binding in bindings"
                  :key="binding.id"
                  :label="binding.name"
                  :value="binding.id"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item label="文本格式" v-if="localConfig.useBinding">
              <el-input
                v-model="localConfig.textFormat"
                @change="val => updateField('textFormat', val)"
                placeholder="例如: ¥{value}元"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="样式配置" name="style">
        <div class="config-section">
          <el-form label-position="top">
            <el-row :gutter="8" style="margin-bottom: 12px;">
              <el-col :span="12">
                <el-form-item label="字体大小">
                  <el-input-number
                    v-model="localConfig.fontSize"
                    :min="8"
                    :max="72"
                    @change="val => updateField('fontSize', val)"
                    controls-position="right"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行高">
                  <el-input-number
                    v-model="localConfig.lineHeight"
                    :min="1"
                    :max="3"
                    :step="0.1"
                    @change="val => updateField('lineHeight', val)"
                    controls-position="right"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="字体颜色">
              <el-color-picker
                v-model="localConfig.color"
                @change="val => updateField('color', val)"
                show-alpha
              />
            </el-form-item>
            
            <el-form-item label="对齐方式">
              <el-radio-group
                v-model="localConfig.align"
                @change="val => updateField('align', val)"
              >
                <el-radio-button label="left">左对齐</el-radio-button>
                <el-radio-button label="center">居中</el-radio-button>
                <el-radio-button label="right">右对齐</el-radio-button>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="字体样式">
              <el-checkbox
                v-model="localConfig.bold"
                @change="val => updateField('bold', val)"
              >加粗</el-checkbox>
              <el-checkbox
                v-model="localConfig.italic"
                @change="val => updateField('italic', val)"
              >斜体</el-checkbox>
              <el-checkbox
                v-model="localConfig.underline"
                @change="val => updateField('underline', val)"
              >下划线</el-checkbox>
            </el-form-item>
            
            <el-form-item label="文本溢出">
              <el-checkbox
                v-model="localConfig.ellipsis"
                @change="val => updateField('ellipsis', val)"
              >显示省略号</el-checkbox>
            </el-form-item>
            
<!--            <el-form-item label="背景颜色">
              <el-color-picker
                v-model="localConfig.bgColor"
                @change="val => updateField('bgColor', val)"
                show-alpha
              />
            </el-form-item> -->
            
            <el-form-item label="圆角">
              <el-input-number
                v-model="localConfig.radius"
                :min="0"
                :max="100"
                @change="val => updateField('radius', val)"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="内边距">
              <el-input-number
                v-model="localConfig.padding"
                :min="0"
                :max="50"
                @change="val => updateField('padding', val)"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="阴影效果">
              <el-input
                v-model="localConfig.boxShadow"
                @change="val => updateField('boxShadow', val)"
                placeholder="0 4px 8px rgba(0,0,0,0.1)"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="交互配置" name="interaction">
        <div class="config-section">
          <el-form label-position="top">
            <el-form-item label="点击事件">
              <el-select
                v-model="localConfig.clickEvent"
                @change="val => updateField('clickEvent', val)"
                placeholder="选择点击事件"
              >
                <el-option label="无" value="" />
                <el-option label="跳转链接" value="link" />
                <el-option label="显示弹窗" value="modal" />
                <el-option label="执行方法" value="function" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="事件参数" v-if="localConfig.clickEvent">
              <el-input
                v-model="localConfig.eventParams"
                @change="val => updateField('eventParams', val)"
                placeholder="输入事件参数"
              />
            </el-form-item>
            
            <el-form-item label="悬停效果">
              <el-select
                v-model="localConfig.hoverEffect"
                @change="val => updateField('hoverEffect', val)"
                placeholder="选择悬停效果"
              >
                <el-option label="无" value="" />
                <el-option label="变色" value="color" />
                <el-option label="下划线" value="underline" />
                <el-option label="放大" value="scale" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
	  
		<el-tab-pane label="数据来源" name="data-src">
		  
		  
		</el-tab-pane>
	  
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'

interface Props {
  text?: string
  useBinding?: string
  textFormat?: string
  fontSize?: number
  lineHeight?: number
  color?: string
  align?: string
  bold?: boolean
  italic?: boolean
  underline?: boolean
  ellipsis?: boolean
  bgColor?: string
  radius?: number
  padding?: number
  boxShadow?: string
  clickEvent?: string
  eventParams?: string
  hoverEffect?: string
  [key: string]: any
}

const props = defineProps<Props>()
const emit = defineEmits(['config-change'])

const activeTab = ref('basic')
const bindings = ref([]) // 这里应该从store获取可用的绑定数据

const localConfig = reactive<Record<string, any>>({
  text: props.text || '请输入文本',
  useBinding: props.useBinding || '',
  textFormat: props.textFormat || '{value}',
  fontSize: typeof props.fontSize === 'number' ? props.fontSize : 14,
  lineHeight: typeof props.lineHeight === 'number' ? props.lineHeight : 1.5,
  color: props.color || '#333333',
  align: props.align || 'left',
  bold: props.bold || false,
  italic: props.italic || false,
  underline: props.underline || false,
  ellipsis: props.ellipsis || false,
  bgColor: props.bgColor || 'transparent',
  radius: typeof props.radius === 'number' ? props.radius : 0,
  padding: typeof props.padding === 'number' ? props.padding : 0,
  boxShadow: props.boxShadow || '',
  clickEvent: props.clickEvent || '',
  eventParams: props.eventParams || '',
  hoverEffect: props.hoverEffect || ''
})

function updateField(key: string, value: any) {
  localConfig[key] = value
  emit('config-change', { key, value })
}

// 监听 props 变化，同步到本地配置
watch(
  () => ({ ...props }),
  (newProps) => {
    localConfig.text = newProps.text || '请输入文本'
    localConfig.useBinding = newProps.useBinding || ''
    localConfig.textFormat = newProps.textFormat || '{value}'
    localConfig.fontSize = typeof newProps.fontSize === 'number' ? newProps.fontSize : 14
    localConfig.lineHeight = typeof newProps.lineHeight === 'number' ? newProps.lineHeight : 1.5
    localConfig.color = newProps.color || '#333333'
    localConfig.align = newProps.align || 'left'
    localConfig.bold = newProps.bold || false
    localConfig.italic = newProps.italic || false
    localConfig.underline = newProps.underline || false
    localConfig.ellipsis = newProps.ellipsis || false
    localConfig.bgColor = newProps.bgColor || 'transparent'
    localConfig.radius = typeof newProps.radius === 'number' ? newProps.radius : 0
    localConfig.padding = typeof newProps.padding === 'number' ? newProps.padding : 0
    localConfig.boxShadow = newProps.boxShadow || ''
    localConfig.clickEvent = newProps.clickEvent || ''
    localConfig.eventParams = newProps.eventParams || ''
    localConfig.hoverEffect = newProps.hoverEffect || ''
  },
  { immediate: true, deep: true }
)
</script>

<style scoped>
.text-option-panel {
  width: 100%;
  height: 100%;
  background: var(--art-main-bg-color);
}

.config-tabs {
  height: 100%;
}

.config-section {
  padding: 16px 0;
  max-height: 500px;
  overflow-y: auto;
}

.el-form-item {
  margin-bottom: 16px;
}
</style>